<template>
 <div>
     <MyHeader/>
     <div style="padding:45px 0 50px 0">
         <MyGoods v-for="item in list" :key="item.id"
         :goodsObj="item"
         />
     </div>
     <MyFooter
     :isAllChecked="isChecked"
     @changFn="changeChecked"
     :allNum="totalCount"
     :allPrice="totalPrice"
     />

</div>
</template>

<script>
import MyHeader from './components/MyHeader/index.vue'
import MyGoods from './components/MyGoods/index.vue'
import MyFooter from './components/MyFooter/index.vue'
export default {
  data () {
    return {
      list:[]
    }
  },
  components:{
    MyHeader,
    MyGoods,
    MyFooter
  },
  async created () {
 const resq= await this.$http({
      method:'GET',
      url:'/api/cart'
    })
    console.log(resq.data.list);
    this.list=resq.data.list
  },
  computed:{
   isChecked(){
     return this.list.every(item=>{return item.goods_state===true})
   },
   totalCount(){
    return this.list.reduce((sum,item)=>{
       if(item.goods_state===true){
         sum+=item.goods_count
       }
       return sum
     },0)
   },
   totalPrice(){
     return this.list.reduce((sum,item)=>{
       if(item.goods_state===true){
         sum+=item.goods_count*item.goods_price
         
       }
      
       return sum
     },0)
   }
  },
  methods:{
    changeChecked(checked){
      this.list.forEach(item=>{return item.goods_state=checked})
    }
  }
}
</script>

<style>

</style>